<template>
  <div id="app">
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <share />
    <loading class="app-loading" :show="loading" />
  </div>
</template>

<script>
import Share from '@/components/common/Share.vue'
import { Loading } from 'vux'
import { mapGetters } from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapGetters({
      loading: 'loading'
    })
  },
  components: {
    Share,
    Loading
  }
}
</script>
<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import './assets/less/default.less';
  .expand-enter-active, .expand-leave-active {
    transition: transform .2s ease-in;
  }
  .expand-enter, .expand-leave-to {
    transform: translateX(100%);
  }
  .expand2-enter-active, .expand2-leave-active {
    transition: opacity .2s ease-in;
  }
  .expand2-enter, .expand2-leave-to {
    opacity: 0;
  }
  .flex {
    display: flex;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-column {
    flex-direction: column;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-space-around {
    justify-content: space-around;
  }
  .justify-content-space-between {
    justify-content: space-between;
  }
  .align-items-center {
    align-items: center;
  }
  .flex-1 {
    flex: 1;
  }
  .container {
    padding-top: 0.9rem;
  }
  .filter-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: .2rem;
    .iconfont {
      font-size: .4rem;
    }
  }
  .share-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: .2rem;
    .iconfont {
      font-size: .4rem;
    }
  }
  .text-primary {
    color: @text-primary;
  }
  .text-regular {
    color: @text-regular;
  }
  .text-secondary {
    color: @text-secondary;
  }
  .color-blue {
    color: @blue;
  }
  .text-wrap {
    word-break: break-all;
  }
  .loading-row {
    line-height: .6rem;
    font-size: .25rem;
    color: #666;
    text-align: center;
  }
  img {
    max-width: 100%;
  }
  .list-show {
    // height: 0!important;
    left: 0 !important;
  }
  .app-loading .weui-toast {
    top: 50%;
    margin-top: -25%;
  }
</style>
